<template>
  <div>
    <div v-for="item in menuData" :key="item._id">
      <el-submenu
          :index="item._id"
          v-if="item.children && item.children.length > 0 && item.children[0].menuType.toString() === '1'">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.menuName }}</span>
        </template>

        <Menu :menuData="item.children"></Menu>

      </el-submenu>
      <el-menu-item
          v-else-if="item.menuType.toString() === '1'"
          :index="item.path"
          :key="item._id"
      >
        <i :class="item.icon"></i>
        {{ item.menuName }}
      </el-menu-item>

    </div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: {
    menuData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  mounted() {
    console.log(this.menuData)
  }
}
</script>

<style scoped>

</style>
